<script setup lang="ts">
import { useResumeStore } from '@/stores/ResumeStore';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
const resumeStore = useResumeStore();
const { resume } = storeToRefs(resumeStore);

const skill = ref([
  'HTML',
  'JavaScript',
  'CSS',
  'Vue',
  'Tailwindcss',
  'ElementUI',
  'Ant Design Vue',
  'UnoCss',
  'Echarts',
  'TypeScript',
  'Uniapp',
  '微信小程序',
  'Java',
  'Spring Boot',
  'Spring MVC',
  'EggJs',
  'Koa',
  'Express',
  'NodeJS',
  'Git',
  'MySQL',
  'Redis',
  'MongoDB',
  'Linux',
  'Nginx',
  'Docker',
]);
</script>

<template>
  <div class="card">
    <h2 class="mb-4 text-lg font-semibold dark:text-night-50">相关技能</h2>
    <div class="-m-2 flex flex-wrap">
      <span
        v-for="(value, index) in skill"
        :key="index"
        class="badge m-1 cursor-pointer bg-emerald-500/20 text-emerald-500 hover:bg-emerald-500 hover:text-white">
        {{ value }}
      </span>
    </div>
  </div>
</template>
